<template>
    <el-button type="primary" @click="openDialog">预览</el-button>
    <el-button type="primary" @click="download">下载</el-button>
    <el-dialog
      v-model="dialogVisible"
      title="预览文件"
      width="60%"
      align-center
      @open="handleOpen"
    >
      <div class="sketch_content">
          <div ref="refWord" v-if="showType === 'word'" />
      </div>
          <template #footer>
              <span class="dialog-footer">
                  <el-button @click="dialogVisible = false">关闭</el-button>
              </span>
          </template>
    </el-dialog>
  </template>
  
  <script lang="ts" setup>
  import { ref, onMounted, getCurrentInstance } from 'vue'
  const { proxy } = getCurrentInstance();
  import { ElMessage } from 'element-plus'
  import { defaultOptions, renderAsync } from 'docx-preview'
  import { GetBlob } from '@/api/common/file.js'
  
  const dialogVisible = ref(false)
  
  
  const showType = ref('word')
  const refWord = ref()
  
  const props = defineProps({
      fileUrl: {
          type:String,
          default:''
      }
  })
  /**
   * 由于ElementPlus的dialog是懒加载的，所以需要在dialog的open事件中渲染预览文件
   */
  const handleOpen = () => {
      GetBlob(props.fileUrl)
          .then((response) => {
              const options = {
                  className: 'docx', // 默认和文档样式类的类名/前缀
                  inWrapper: true, //  启用围绕文档内容渲染包装器
                  ignoreWidth: false, //  禁止页面渲染宽度
                  ignoreHeight: false, //  禁止页面渲染高度
                  ignoreFonts: false, //  禁止字体渲染
                  breakPages: true, //  在分页符上启用分页
                  ignoreLastRenderedPageBreak: true, //  禁用lastRenderedPageBreak元素的分页
                  experimental: false, //  启用实验性功能（制表符停止计算）
                  trimXmlDeclaration: true, //   如果为真，xml声明将在解析之前从xml文档中删除
                  debug: false, //  启用额外的日志记录
                  useBase64URL: true, // 如果为true，图片、字体等将被转换为base 64 URL，否则使用URL.createObjectURL
                  useMathMLPolyfill: false, //  包括用于 chrome、edge 等的 MathML polyfill。
                  showChanges: false // 启用文档更改（插入/删除）的实验性呈现
              }
              renderAsync(response , proxy.$refs.refWord, null, options)
          })
          .catch((error) => {
              dialogVisible.value = false
              ElMessage.error("文件预览失败！")
          });
  }
  const openDialog = () => {
          dialogVisible.value = true
  }
  
  const download = () => {
      GetBlob(props.fileUrl)
          .then((response) => {
              let blob = new Blob([response])
              let url = window.URL.createObjectURL(blob) // 创建url并指向blob
              let a = document.createElement("a")
              a.href = url
              a.download = props.fileUrl.substr(props.fileUrl.lastIndexOf("/")+1)
              a.click()
              window.URL.revokeObjectURL(url) // 释放该url
          })
          .catch((error) => {
              ElMessage.error("预览失败！")
          });
  }
  </script>
  
  <style scoped>
      .dialog-footer button:first-child {
          margin-right: 10px;
      }
      .sketch_content {
          /* 必须有高度 overflow 为自动 */
          overflow: auto;
          height: 700px;
          border-top: 1px solid #eff1f4;
          border-bottom: 1px solid #eff1f4;
          padding: 0px 30px 11px 27px;
      }
   
      /* // 滚动条的样式,宽高分别对应横竖滚动条的尺寸 */
      .sketch_content::-webkit-scrollbar {
        width: 3px;
      }
   
      /* // 滚动条里面默认的小方块,自定义样式 */
      .sketch_content::-webkit-scrollbar-thumb {
        background: #8798AF;
        border-radius: 2px;
      }
   
      /* // 滚动条里面的轨道 */
      .sketch_content::-webkit-scrollbar-track {
        background: transparent;
      }
  </style>